<template>
	<view>
		<u-navbar back-icon-color="#FFFFFF" title="我的订单" :background="background" title-color="#FFFFFF"></u-navbar>
		<view class="">
			<view><u-tabs active-color="#18b566" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs></view>
			<u-sticky>
			</u-sticky>
		</view>
		<u-gap height="80" bg-color="#f3f4f6"></u-gap>
		<view class="wrap">
			<view v-if="!isEmpty" class="order-list">
				<view v-for="(item, index) in orderList" :key="index">
					<view class="order">
						<view class="top">
							<view class="left">
								<text>订单编号：{{ item.orderSn }}</text>
								<!-- <u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
								<view class="store">{{ res.store }}</view>
								<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon> -->
							</view>
							<view v-show="item.orderStatus == 0" class="right">待发货</view>
							<view v-show="item.orderStatus == 4" class="right">已完成</view>
							<view v-show="item.orderStatus == 5" class="right">已取消</view>
						</view>
						<view class="item" v-for="(itemGoods, index) in item.goods" :key="index">
							<view class="left"><image :src="itemGoods.img" mode="aspectFill"></image></view>
							<view class="content">
								<view class="title u-line-2">{{ itemGoods.goodsName }}<text class="tags" v-show="itemGoods.gainType == 2">赠品</text></view>
								<view class="type">{{ itemGoods.specValues }}</view>
								<!-- <view class="delivery-time">发货时间 {{ item.deliveryTime }}</view> -->
							</view>
							<view class="right">
								<view class="price">
									￥{{ itemGoods.sellPrice }}
									<!-- <text class="decimal">.{{ priceDecimal(item.price) }}</text> -->
								</view>
								<view class="number">x{{ itemGoods.count }}</view>
							</view>
						</view>
						<view class="total">
							<view class="total-top">
								<view class="discount-price" v-if="item.discountsPrice">
									优惠金额：
									<text>￥{{ item.discountsPrice }}</text>
								</view>
								<view class="discount-price" v-else>
									优惠金额：
									<text>￥0.00</text>
								</view>
								<view class="discount-price">
									订单金额：
									<text>￥{{ item.totalPrice }}</text>
								</view>
							</view>
							<view class="total-price">
								实际支付金额：
								<text>￥{{ item.payPrice }}</text>
							</view>
						</view>
						<view class="bottom">
							<view class="more">
								<!-- <text>下单:{{ $u.timeFormat(item.createTime, 'yyyy年mm月dd日 hh时MM分') }}</text> -->
								<text>下单:{{ item.createTime }}</text>
								<!-- <u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon> -->
							</view>
							<view v-show="item.orderStatus == 0" class="evaluate btn" @click="cancelOrder(item.orderSn)">取消订单</view>
							<view v-show="item.orderStatus == 4" class="evaluate btn">已完成</view>
							<view v-show="item.orderStatus == 5" class="cancel btn">已取消</view>
							<!-- 					<view class="exchange btn">卖了换钱</view>
							<view class="evaluate btn">评价</view> -->
						</view>
					</view>
				</view>
				<u-loadmore :status="status" bgColor="#f3f4f6"></u-loadmore>
				<u-gap height="40" bg-color="#f3f4f6"></u-gap>
			</view>
			<view v-else class="">
				<view>
					<view class="centre">
						<!-- <image src="https://cdn.uviewui.com/uview/template/taobao-order.png" mode=""></image> -->
						<view class="explain">
							您还没有相关的订单
							<view class="tips">可以去看看有那些想买的</view>
						</view>
						<view class="btn" @click="goMenu">随便逛逛</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<view><u-modal v-model="modalShow" :content="modalContent" @confirm="confirm" :show-cancel-button="true"></u-modal></view>
		<!-- <view>
			<u-mask :show="maskShow" :custom-style="{ background: 'rgba(0, 0, 0, 0.5)' }">
				<view class="m-warp">
					<u-loading mode="flower" size="40"></u-loading>
					<view>加载中</view>
				</view>
			</u-mask>
		</view> -->
	</view>
</template>

<script>
import mask from '@/components/ls-mask/mask.vue';
export default {
	components: {
		mask
	},
	data() {
		return {
			background: {
				//backgroundColor: '#001f3f'
				// 渐变色
				backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
			},
			list: [
				{
					valse: 1,
					name: '全部'
				},
				{
					valse: 2,
					name: '待发货'
				},
				{
					valse: 3,
					name: '已完成'
				}
			],
			//tabs
			current: 0,
			tabs: [
				{
					valse: 1,
					name: '全部'
				},
				{
					valse: 2,
					name: '待发货'
				},
				{
					valse: 3,
					name: '已完成'
				}
			],
			//
			isEmpty: false,
			//
			query: {
				sort: 'id,desc',
				page: 0,
				size: 10
			},
			totalElements: 0,
			status: '',
			//
			orderList: [],
			//
			maskShow: false,
			//
			modalShow: false,
			modalContent: '确认取消该订单吗',
			orderSn: ''
		};
	},
	onLoad(e) {
		try {
			const token = uni.getStorageSync('token');
			if (token) {
				const userInfo = uni.getStorageSync('userInfo');
				if (!userInfo) {
					//#ifdef APP-PLUS
					uni.reLaunch({
						url: '/pages/login/index'
					});
					//#endif
					//#ifdef MP-WEIXIN
					uni.reLaunch({
						url: '/pages/login/xcxLogin'
					});
					//#endif
				}
				this.query.userId = userInfo.id;
				console.log(e);
				this.current = e.index;
				if (this.current == 0) {
					//
					console.log('this.current == 0');
					this.query.orderStatus = '';
					this.getOrderList();
				} else if (this.current == 1) {
					//待收货
					console.log('this.current == 1');
					this.query.orderStatus = 0;
					this.getOrderList();
				} else {
					//已完成
					console.log('this.current == 2');
					this.query.orderStatus = 4;
					this.getOrderList();
				}
				this.getOrderList();
			} else {
				//#ifdef APP-PLUS
				uni.reLaunch({
					url: '/pages/login/index'
				});
				//#endif
				//#ifdef MP-WEIXIN
				uni.reLaunch({
					url: '/pages/login/xcxLogin'
				});
				//#endif
			}
		} catch (e) {
			// error
		}
	},
	computed: {
		// 价格小数
		priceDecimal() {
			return val => {
				if (val !== parseInt(val)) return val.slice(-2);
				else return '00';
			};
		},
		// 价格整数
		priceInt() {
			return val => {
				if (val !== parseInt(val)) return val.split('.')[0];
				else return val;
			};
		}
	},
	onReachBottom() {
		this.getMoreOrderList();
	},
	methods: {
		//订单列表
		getOrderList() {
			let _t = this;
			_t.query.page = 0;
			_t.isEmpty = false;
			_t.maskShow = true;
			console.log('query');
			console.log(_t.query);
			_t.$u.api.findOrderList(_t.query).then(res => {
				console.log('findOrderList');
				console.log(res);
				_t.totalElements = res.data.totalElements;
				_t.orderList = res.data.content;
				if (res.data.totalElements > 0) {
					_t.orderList.forEach((item, index) => {
						item.goods = JSON.parse(item.goods);
					});
				}
				if (res.data.content.length == 0) {
					_t.isEmpty = true;
					_t.status = 'nomore';
				} else if (res.data.totalElements == 1) {
					_t.status = 'nomore';
				} else {
					_t.status = 'loadmore';
				}
				_t.maskShow = false;
				console.log(_t.orderList);
			});
		},
		getMoreOrderList() {
			let _t = this;
			_t.maskShow = true;
			_t.query.page++;
			console.log(_t.query.page);
			_t.$u.api.findOrderList(_t.query).then(res => {
				console.log('getMoreOrderList');
				console.log(res);
				let totle = parseInt(res.data.totalElements / _t.query.size);
				if (_t.query.page < totle) {
					_t.orderList = _t.orderList.concat(res.data.content);
					_t.status = 'loadmore';
					console.log('loadmore');
				} else {
					_t.status = 'nomore';
					console.log('nomore');
				}
				_t.maskShow = false;
				console.log('end');
			});
		},
		// tabs 栏切换
		change(index) {
			let _t = this;
			console.log(index);
			_t.current = index;
			if (_t.current == 0) {
				//
				_t.query.orderStatus = '';
				_t.getOrderList();
			} else if (_t.current == 1) {
				//待收货
				_t.query.orderStatus = 0;
				_t.getOrderList();
			} else {
				//已完成
				_t.query.orderStatus = 4;
				_t.getOrderList();
			}
		},
		//
		goMenu() {
			let _t = this;
			_t.$u.route({
				type: 'tab',
				url: '/pages/menu/index'
			});
		},
		//取消订单
		cancelOrder(orderSn) {
			let _t = this;
			_t.modalShow = true;
			_t.orderSn = orderSn;
		},
		confirm(orderSn) {
			let _t = this;
			_t.$u.api.cancelOrder(_t.orderSn).then(res => {
				console.log('cancelOrder');
				console.log(res);
				if (res.statusCode == 200) {
					_t.$refs.uToast.show({
						title: '提示：订单取消成功',
						type: 'success'
					});
				}
				_t.orderSn = '';
				_t.getOrderList();
			});
		}
	}
};
</script>

<style lang="scss">
/* #ifndef H5 */
page {
	background-color: #f3f4f6;
}
/* #endif */
.order {
	width: 710rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			.store {
				margin: 0 10rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.right {
			color: #17933f;
		}
	}
	.item {
		display: flex;
		margin: 20rpx 0 0;
		.left {
			width: 20%;
			margin-right: 20rpx;
			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
			}
		}
		.content {
			width: 60%;
			.title {
				font-size: 28rpx;
				line-height: 50rpx;
			}
			.type {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
			}
			.delivery-time {
				color: #e5d001;
				font-size: 24rpx;
			}
			.tags {
				background-color: #fa3534;
				color: #FFFFFF;
				padding: 2rpx 8rpx;
			font-size: 12px;
			}
		}
		.right {
			width: 20%;
			margin-left: 10rpx;
			padding-top: 20rpx;
			text-align: left;
			.decimal {
				font-size: 24rpx;
				margin-top: 4rpx;
			}
			.number {
				color: $u-tips-color;
				font-size: 24rpx;
			}
		}
	}
	.total {
		margin-top: 20rpx;
		width: 100%;
		text-align: right;
		font-size: 24rpx;
		.total-top {
			width: 100%;
			padding-bottom: 16rpx;
			.discount-price {
				font-size: 28rpx;
				padding-bottom: 8rpx;
			}
		}
		.total-price {
			font-weight: bold;
			color: $u-type-warning;
			font-size: 32rpx;
		}

		text {
			width: 140rpx !important;
		}
	}
	.bottom {
		display: flex;
		margin-top: 40rpx;
		padding: 0 10rpx;
		justify-content: space-between;
		align-items: center;
		.more {
			color: $u-type-info-dark;
			font-size: 28rpx;
		}
		.btn {
			line-height: 52rpx;
			width: 160rpx;
			border-radius: 26rpx;
			border: 2rpx solid $u-border-color;
			font-size: 26rpx;
			text-align: center;
			color: $u-type-info-dark;
		}
		.evaluate {
			color: $u-type-warning-dark;
			border-color: $u-type-warning-dark;
		}
		.cancel {
			color: $u-type-info;
			border-color: $u-type-info;
		}
	}
}
.centre {
	text-align: center;
	margin: 200rpx auto;
	font-size: 32rpx;
	image {
		width: 164rpx;
		height: 164rpx;
		border-radius: 50%;
		margin-bottom: 20rpx;
	}
	.tips {
		font-size: 24rpx;
		color: #999999;
		margin-top: 20rpx;
	}
	.btn {
		margin: 80rpx auto;
		width: 200rpx;
		border-radius: 32rpx;
		line-height: 64rpx;
		color: #ffffff;
		font-size: 26rpx;
		background: linear-gradient(45deg, rgba(28, 187, 180,1) 0%, rgba(141, 198, 63, 1) 100%);
	}
}
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}
.m-warp {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: #ffffff;
}
.tabs {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
}
</style>
